<template>
  <div>
    <!-- 添加到仓库 -->
    <el-dialog
      append-to-body
      title="添加商品"
      :visible.sync="dialogFormVisible1"
      width="700px"
      class="dialog"
      @close="cleargoods"
    >
      <el-form inline :model="goods">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <p>商品信息</p>
          </div>
          <div class="text item">
            <el-form-item label="商品ID">
              <el-input size="mini" v-model="goods.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品编号">
              <el-input size="mini" v-model="goods.code" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input size="mini" v-model="goods.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品型号">
              <el-input size="mini" v-model="goods.model" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品单位">
              <el-input size="mini" v-model="goods.unit" disabled></el-input>
            </el-form-item>
            <el-form-item label="成本单价">
              <el-input type="text" size="mini" v-model="goods.purchasingPrice"></el-input>
            </el-form-item>
            <el-form-item label="添加数量">
              <el-input size="mini" v-model="goods.inventoryQuantity"></el-input>
            </el-form-item>
          </div>
        </el-card>
        <div class="card_bottom">
          <el-form-item>
            <el-button type="success" size="mini" @click="addgoods">添加</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
    <!-- 修改商品信息 -->
    <el-dialog
      append-to-body
      title="添加商品"
      :visible.sync="dialogFormVisible2"
      width="700px"
      class="dialog"
      @close="cleargoods"
    >
      <el-form inline :model="goods">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <p>商品信息</p>
          </div>
          <div class="text item">
            <el-form-item label="商品ID">
              <el-input size="mini" v-model="goods.id" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品编号">
              <el-input size="mini" v-model="goods.code" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品名称">
              <el-input size="mini" v-model="goods.name" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品型号">
              <el-input size="mini" v-model="goods.model" disabled></el-input>
            </el-form-item>
            <el-form-item label="商品单位">
              <el-input size="mini" v-model="goods.unit" disabled></el-input>
            </el-form-item>
            <el-form-item label="销售单价">
              <el-input type="text" size="mini" v-model="goods.sellingPrice"></el-input>
            </el-form-item>
            <el-form-item label="添加数量">
              <el-input size="mini" v-model="goods.inventoryQuantity"></el-input>
            </el-form-item>
          </div>
        </el-card>
        <div class="card_bottom">
          <el-form-item>
            <el-button type="success" size="mini" @click="upgoods">修改</el-button>
          </el-form-item>
        </div>
      </el-form>
    </el-dialog>
    <!-- 未上架商品 -->
    <el-row>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="float:left;">
              <font size="2" color="red">商品信息</font>
            </span>
          </div>
          <div class="text item" style="height:460px;">
            <!-- 商品信息 -->
            <el-form :inline="true" :model="form1" class="demo-form-inline">
              <el-form-item label="商品名称">
                <el-input v-model="form1.name" size="mini" placeholder="商品名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  @click="getRequest1()"
                  size="mini"
                  icon="el-icon-search"
                >查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="text" icon="el-icon-circle-plus-outline" @click="add">添加到仓库</el-button>
              </el-form-item>
            </el-form>
            <el-table
              highlight-current-row
              :data="tableData1"
              style="width: 100%"
              @cell-click="clickgood"
              @cell-dblclick="goodtabledouble"
            >
              <el-table-column prop="id" label="id" width="50"></el-table-column>
              <el-table-column prop="code" label="商品编号" width="100"></el-table-column>
              <el-table-column prop="name" label="商品名称" width="500" show-overflow-tooltip></el-table-column>

              <el-table-column prop="model" label="商品样式" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="producer" label="生产商" width="100" show-overflow-tooltip></el-table-column>
              <el-table-column prop="unit" label="单位" width="150"></el-table-column>
            </el-table>

            <el-pagination
              @size-change="handleSizeChange1"
              @current-change="handleCurrentChange1"
              :current-page="pageNum1"
              :page-sizes="[5, 10, 20, 30, 40]"
              :page-size="pageSize1"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total1"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
      <el-col :span="12">
        <el-card class="box-card">
          <div slot="header" class="clearfix">
            <span style="float:left;">
              <font size="2" color="red">期初库存</font>
            </span>
          </div>
          <div class="text item" style="height:460px;">
            <!-- 商品信息 -->
            <el-form :inline="true" :model="form2" class="demo-form-inline">
              <el-form-item label="商品名称">
                <el-input v-model="form2.name" size="mini" placeholder="商品名称"></el-input>
              </el-form-item>
              <el-form-item>
                <el-button
                  type="success"
                  @click="getRequest2()"
                  size="mini"
                  icon="el-icon-search"
                >查询</el-button>
              </el-form-item>
              <el-form-item>
                <el-button type="text" icon="el-icon-circle-plus-outline" @click="up">修改数量和成本价</el-button>
                <el-button type="text" icon="el-icon-circle-plus-outline" @click="del">删除</el-button>
              </el-form-item>
            </el-form>
            <el-table
              highlight-current-row
              :data="tableData2"
              style="width: 100%"
              @cell-click="clickgoods"
              @cell-dblclick="goodstabledouble"
            >
              <el-table-column prop="id" label="id" width="50"></el-table-column>
              <el-table-column prop="code" label="商品代码" width="100"></el-table-column>
              <el-table-column prop="name" label="商品名称" width="300" show-overflow-tooltip></el-table-column>

              <el-table-column prop="inventoryQuantity" label="库存" width="100"></el-table-column>
              <el-table-column prop="model" label="商品样式" width="150" show-overflow-tooltip></el-table-column>
              <el-table-column prop="producer" label="生产商" width="300" show-overflow-tooltip></el-table-column>
              <el-table-column prop="purchasingPrice" label="采购价格" width="150"></el-table-column>
              <el-table-column prop="sellingPrice" label="销售价格" width="150"></el-table-column>
              <el-table-column prop="lastPurchasingPrice" label="最后成交价" width="150"></el-table-column>
              <el-table-column prop="unit" label="单位" width="150"></el-table-column>
            </el-table>

            <el-pagination
              @size-change="handleSizeChange2"
              @current-change="handleCurrentChange2"
              :current-page="pageNum2"
              :page-sizes="[5, 15, 25, 35, 45]"
              :page-size="pageSize2"
              layout="total, sizes, prev, pager, next, jumper"
              :total="total2"
            ></el-pagination>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>
<script>
var id1 = {};
var id2 = {};
export default {
  mounted() {
    this.getRequest1();
    this.getRequest2();
  },

  methods: {
    add() {
      var row = this.get1();
      if (row != {}) {
        console.log("goods 行row", row);
        this.goods = JSON.parse(JSON.stringify(row));
        this.goods.price = this.goods.sellingPrice;
        this.goods.num = 1;
        this.dialogFormVisible1 = true;
      }
    },
    up() {
      var row = this.get2();
      if (row != {}) {
        console.log("goods 行row", row);
        this.goods = JSON.parse(JSON.stringify(row));
        this.goods.price = this.goods.sellingPrice;
        this.goods.num = 1;
        this.dialogFormVisible1 = true;
      }
    },
    set1(num) {
      id1 = num;
    },
    get1() {
      return id1;
    },
    set2(num) {
      id2 = num;
    },
    get2() {
      return id2;
    },

    clickgood(row, column, cell, event) {
      console.log("goods 行row", row);
      this.set1(row);
    },
    clickgoods(row, column, cell, event) {
      console.log("goods 行row", row);
      this.set2(row);
    },
    goodtabledouble(row, column, cell, event) {
      console.log("goods 行row", row);
      this.goods = JSON.parse(JSON.stringify(row));
      this.goods.price = this.goods.sellingPrice;
      this.goods.num = 1;
      this.dialogFormVisible1 = true;
    },
    goodstabledouble(row, column, cell, event) {
      console.log("goods 行row", row);
      this.goods = JSON.parse(JSON.stringify(row));
      this.goods.price = this.goods.sellingPrice;
      this.goods.num = 1;
      this.dialogFormVisible2 = true;
    },
    upgoods() {
      var $this = this;
      this.goods["access_token"] = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: "http://localhost:9999/basic/basic/tGoods/up",
        params: this.goods
      }).then(function(res) {
        console.log("==================================", res.data.obj);
        $this.goods = {};
        $this.dialogFormVisible1 = false;
        $this.getRequest2();
        $this.getRequest1();
      });
    },
    del() {
      var row = this.get2();
      if (row != {}) {
        this.$confirm("此操作将永久删除该文件, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning"
        })
          .then(() => {
            var ids = row.id + "";
            this.goods.ids = ids;
            this.goods["access_token"] = localStorage.getItem("access_token");
            this.axios({
              method: "get",
              url: "http://localhost:9999/basic/basic/tGoods/del",
              params: this.goods
            }).then(function(res) {
              console.log("==================================", res.data.obj);
              location.reload();
              this.$message({
                type: "success",
                message: "删除成功!"
              });
            });
          })
          .catch(() => {
            this.$message({
              type: "info",
              message: "已取消删除"
            });
          });
      } else {
      }
    },
    addgoods() {
      var $this = this;
      this.goods.state = 2;
      this.goods["access_token"] = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: "http://localhost:9999/basic/basic/tGoods/up",
        params: this.goods
      }).then(function(res) {
        console.log("==================================", res.data.obj);
        $this.goods = {};
        $this.dialogFormVisible1 = false;
        $this.getRequest1();
        $this.getRequest2();
      });
    },
    cleargoods() {
      this.gettotalprice();
      this.goods = {};
    },
    getRequest1() {
      this.form1.pageNum = this.pageNum1;
      this.form1.pageSize = this.pageSize1;
      this.form1.state = 1;
      var $this = this;
      this.form1["access_token"] = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: "http://localhost:9999/basic/basic/tGoods/list",
        params: this.form1
      }).then(function(res) {
        console.log("==================================", res.data.obj);
        $this.tableData1 = res.data.obj.list;
        $this.total1 = res.data.obj.total;
      });
    },
    handleEdit(index, row) {
      // console.log(index, row);
      // this.addInv["access_token"] = localStorage.getItem("access_token");
      // this.addInv.id = row.id;
      var $this = this;
      this.dialogFormVisible1 = true;
      this.axios({
        method: "get",
        url: "http://localhost:9999/basic/basic/tGoods/get",
        params: {
          id: row.id,
          access_token: localStorage.getItem("access_token")
        }
      }).then(function(res) {
        console.log("==================================", res.data.obj);
        $this.addInv = res.data.obj;
      });
    },
    getRequest2() {
      this.form2.pageNum = this.pageNum2;
      this.form2.pageSize = this.pageSize2;
      this.form2.state = 2;
      var $this = this;
      this.form2["access_token"] = localStorage.getItem("access_token");
      this.axios({
        method: "get",
        url: "http://localhost:9999/basic/basic/tGoods/list",
        params: this.form2
      }).then(function(res) {
        console.log("+++++++++", res.data.obj);
        $this.tableData2 = res.data.obj.list;
        $this.total2 = res.data.obj.total;
      });
    },
    handleSizeChange1(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize1 = val;
      this.getRequest1();
    },
    handleCurrentChange1(val) {
      console.log(`当前页: ${val}`);
      this.pageNum1 = val;
      this.getRequest1();
    },
    handleSizeChange2(val) {
      console.log(`每页 ${val} 条`);
      this.pageSize2 = val;
      this.getRequest2();
    },
    handleCurrentChange2(val) {
      console.log(`当前页: ${val}`);
      this.pageNum2 = val;
      this.getRequest2();
    }
  },

  data() {
    return {
      tableData1: [],
      tableData2: [],
      pageNum1: 1,
      pageSize1: 5,
      pageNum2: 1,
      pageSize2: 5,
      total1: 0,
      total2: 0,
      form1: {
        name: "",
        pageNum: 1,
        pageSize: 10
      },
      form2: {
        name: "",
        pageNum: 1,
        pageSize: 10
      },
      goods: {},
      action: "",
      dialogFormVisible1: false,
      dialogFormVisible2: false,
      addInv: {}
    };
  }
};
</script>
<style scoped>
</style>